{% extends 'teleplatebase/index.html' %}
{% block content %}
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- <meta name='robots' content='index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1' /> -->
    <title>联系我们</title>
    <meta property="article:modified_time" content="2023-08-28T14:23:19+00:00" />
    <meta property="og:image:width" content="1920" />
    <meta property="og:image:height" content="1080" />
    <meta property="og:image:type" content="image/png" />
    <meta name="twitter:card" content="summary_large_image" />
    <script src="../js/jquery.js"></script>
    <link href="../layui/css/layui.css" rel="stylesheet">
  <script src="../layui/layui.js"></script>
  <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你的API密钥"></script>
  </head>
  <style>
     .main-box {

    }
    .top-img {
      width: 100%;
      height: 500px;
      background-color: pink;
    }
    .top-img img {
      width: 100%;
      height: 100%;
    }
    .job-info {
      border: 1px solid #eee;
      padding: 20px;
      padding-bottom: 0;
      display: flex;
      margin-top: 50px;
      flex-wrap: wrap;
    }
    .job-item {
      width: 32%;
      display: flex;
      margin-bottom: 20px;
      /* align-items: center; */
    }
    .job-item .left img {
      width: 150px;
      height: 200px;
    }
    .job-item .right {
      padding-left: 10px;
      border-top: 1px solid #000;
      border-right: 1px solid #000;
      border-bottom: 1px solid #000;
      padding-right: 10px;
    }
    .text-item {
      margin-bottom: 15px;
    }
    .text-item:first-child {
      margin-top: 15px;
    }
    .text-item:last-child {
      margin-bottom: 0;
    }
    .map-box {
      display: flex;
      padding: 20px;
    }
    .text-box {
      width: 40%;
    }
    #containers {
      width: 60%;
      height: 500px;
      /* background-color: pink; */
    }
    .online-form {
      padding: 50px;
      /* display: flex; */
    }
    .top-text {
      margin-bottom: 50px;
    }
    .top-text .title {
      font-weight: bold;
      font-size: 20px;
      margin-bottom: 10px;
    }
    .online-form .img-box {
      width: 500px;
      height: 500px;
      background-color: pink;
    }
    .form-box {
      display: flex;
    }
    .form-tabel {
      width: 50%;
      margin-right: 50px;
    }
    .item-box {
      margin-bottom: 15px;
    }
    .item-box1 {
      display: flex;
      margin-bottom: 15px;
    }
    .input-box {
      width: 48%;
    }
    .input-box:first-child {
      margin-right: 20px;
    }
    .text-box {
      margin-bottom: 20px;
    }
    .label-title {
      margin-bottom: 10px;
    }
  </style>
  <body>
    <div class="pageWrapper">
      <div class="main-box">
        <!-- 头部图片 -->
        <div class="top-img">
          <img src="" alt="">
        </div>
        <!-- 个人名片 -->
        <div class="job-info">
          {% for person in persons %}
          <div class="job-item">
             <div class="left">
               <img src="{{ person.photo }}" alt="{{ person.name }}">
             </div>
             <div class="right">
               <div class="text-item">
                 <span>姓名:</span>
                 <span>{{ person.name }}</span>
               </div>
               <div class="text-item">
                <span>电话:</span>
                <span>{{ person.phone }}</span>
               </div>
               <div class="text-item">
                <span>微信:</span>
                <span>{{ person.wechat }}</span>
               </div>
               <div class="text-item">
                 <span>邮箱:</span>
                 <span>{{ person.email }}</span>
               </div>
             </div>
          </div>
          {% endfor %}
        </div>
        <!-- 地图文字 -->
         <div class="map-box">
           <div class="text-box">
             我是文字信息啦啦啦啦啦啦
           </div>
           <div id="containers"></div>
         </div>
         <!-- 在线留言和图片 -->
         <div class="online-form">
            <div class="top-text">
              <div class="title">在线留言</div>
              <div class="introuce">文字描述</div>
            </div>
            <div class="form-box">
              <div class="form-tabel">
                <div class="item-box">
                  <div class="label-title">
                    公司名称
                  </div>
                  <div class="layui-form">
                    <input type="text" name="" placeholder="文本框" class="layui-input">
                  </div>
                  <!-- <input type="text"> -->
                </div>
                <div class="item-box1">
                  <div class="input-box">
                    <div class="label-title">名字:</div>
                    <input type="text" name="" placeholder="文本框" class="layui-input">
                  </div>
                  <div class="input-box">
                    <div class="label-title">姓氏:</div>
                    <input type="text" name="" placeholder="文本框" class="layui-input">
                  </div>
                </div>
                <div class="item-box1">
                  <div class="input-box">
                    <div class="label-title">联系电话:</div>
                    <input type="text" name="" placeholder="文本框" class="layui-input">
                  </div>
                  <div class="input-box">
                    <div class="label-title">邮箱:</div>
                    <input type="text" name="" placeholder="文本框" class="layui-input">
                  </div>
                </div>
                <div class="item-box">
                  <div class="label-title">
                    留言:
                  </div>
                  <textarea name="" placeholder="多行文本框" class="layui-textarea"></textarea>
                </div>
                <div class="btn-box">
                  <div class="text-box">文字描述</div>
                  <div class="layui-btn-container">
                    <button type="button" class="layui-btn layui-btn-lg">提交</button>
                  </div>
                </div>
              </div>
              <div class="img-box">
                <img src="" alt="">
              </div>
            </div>
         </div>
      </div>
    </div>
  </body>
  <script>
     window.onload = function() {
          // 实例化地图
          var map = new AMap.Map('containers', {
              resizeEnable: true, // 是否监控地图容器大小变化
              zoom: 11, // 初始地图层级
              center: [116.397428, 39.90923] // 初始地图中心点
          });
      };
  </script>
{% endblock %}
